<!--json格式化组件-->

<template>
    <HomePage :side-menu-default-openeds="sideMenuDefaultOpeneds" :side-menu-default-active="sideMenuDefaultActive">
        <div slot="breadcrumbmodule">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="padding:20px;">
                <el-breadcrumb-item :to="{ path: '/redis/param' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>JSON转换工具</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div slot="corechildmodule">
            <div id="inputArea" >
                <el-badge class="item" style="padding-bottom:5px;padding-left:5px;">转换前</el-badge>
                <el-input v-model="beforeFormat" @input="formatJson" type="textarea" :rows="35" placeholder="在此输入json字符串,右侧为格式化后的数据" resize="none"></el-input>
            </div>
            <div id="outputArea" >
                <el-badge class="item" style="padding-bottom:5px;padding-left:5px;">转换后</el-badge>
                <el-input v-model="afterFormat" type="textarea" :rows="35" placeholder="转换后的json数据" resize="none"></el-input>
            </div>
        </div>
    </HomePage>
</template>

<script>

    //引入主模块
    import HomePage from '@/views/homepage/HomePage'

    export default {
        name: "JsonConversion",
        components: {HomePage},
        data() {
            return {
                sideMenuDefaultOpeneds:['4'],
                sideMenuDefaultActive:"/util/jsonConversion",
                beforeFormat:'{"employees": [{"firstName": "Bill","lastName": "Gates"},{"firstName": "George","lastName": "Bush"},{"firstName": "Thomas","lastName": "Carter"}]}',//格式化之前的数据
                afterFormat:''//格式化之后的数据
            }
        },
        methods:{
            formatJson(){
                var self = this;
                if(self.isJsonString(self.beforeFormat)){
                    self.afterFormat = JSON.stringify(JSON.parse(self.beforeFormat),null,4);    
                }else{
                    self.afterFormat = 'json格式错误，不能转换数据';
                }
                
            },
            //判断能否转换成json
            isJsonString(str) {
                try {
                    if (typeof JSON.parse(str) == "object") {
                        return true;
                    }
                } catch(e) {

                }
                return false;
            }
        }
    }
</script>

<style type="text/css">

    #inputArea{
        width:calc(50% - 5px);
        min-height:800px;
        height:100%;
        float:left;
    }

    #outputArea{
        width:calc(50% - 5px);
        min-height:800px;
        height:100%;
        float:right;
    }


</style>
